<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 80vh; overflow-y: hidden"
      v-model="essay.content"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
    <a-button style="float: right" @click="visible = true" type="primary"
      >提交</a-button
    >
  </div>

  <a-modal
    v-model:visible="visible"
    title="文章发布"
    ok-text="确认"
    cancel-text="取消"
    @ok="handleOk"
  >
    <a-input v-model:value="essay.title" placeholder="标题" />

    <br />
    <br />

    <a-textarea
      v-model:value="essay.description"
      placeholder="文章介绍"
      show-count
      :maxlength="200"
    />
  </a-modal>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, reactive, ref, shallowRef } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import essayApi from "@/apis/essayApi";
import { useStore } from "vuex";
import router from "@/router";
import { message } from "ant-design-vue";
export default {
  name: "WEditor",
  components: { Editor, Toolbar },
  setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();

    const store = useStore();

    const access = store.state.user.info.access;

    const essay = reactive({
      title: "",
      description: "",
      content: "",
    });

    const toolbarConfig = {};

    const visible = ref(false);

    toolbarConfig.excludeKeys = ["group-video"];

    const editorConfig = {
      placeholder: "请输入内容...",
      MENU_CONF: {
        // 配置上传图片
        uploadImage: {
          fieldName: "file",
          server: store.state.web.serverAddress + "/codes/oss/weditor/fileoss",
          headers: {
            Authorization: "token:" + access, //指定消息格式
          },
          allowedFileTypes: ["image/*"],
        },
      },
    };

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });

    const handleCreated = (editor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    };

    const handleOk = () => {
      essayApi
        .release(essay, access)
        .then((resp) => {
          if (resp.code === 200) {
            message.success("发布文章成功");
            router.push({
              name: "userspace",
              params: { userId: store.state.user.info.id },
            });
            essay.title = "";
            essay.description = "";
            essay.content = "";
          }
        })
        .catch((resp) => {
          console.log(resp);
        });
    };

    return {
      editorRef,
      mode: "default", // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,

      essay,
      handleOk,

      visible,
    };
  },
};
</script>    

<style scoped>
</style>